Marseille comme je t'aime
...
Visite guidé.
... ...
...
Les incontournables de Marseille.
Utilisez le système de grille Bootstrap et ses .row-colsclasses pour contrôler le nombre de colonnes de grille (entourées autour de vos cartes) que vous affichez par ligne. Par exemple, voici .row-cols-1la disposition des cartes sur une colonne et .row-cols-md-2la division de quatre cartes sur une largeur égale sur plusieurs lignes, à partir du point d'arrêt moyen vers le haut.
...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Changez-le .row-cols-3et vous verrez le quatrième emballage de la carte.
...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorsque vous avez besoin d’une hauteur égale, ajoutez-en .h-100 aux cartes. Si vous souhaitez des hauteurs égales par défaut, vous pouvez définir $card-height: 100%dans Sass.
...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a short card.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorsque vous avez besoin d’une hauteur égale, ajoutez-en .h-100 aux cartes. Si vous souhaitez des hauteurs égales par défaut, vous pouvez définir $card-height: 100%dans Sass.
Tout comme pour les groupes de cartes, les pieds de page des cartes s’aligneront automatiquement.
...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Dernière mise à jour il y a 3 minutes
...
sun ip lan

This card has supporting text below as a natural lead-in to additional content.

Dernière mise à jour il y a 3 minutes
...
sun set 7

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Dernière mise à jour il y a 3 minutes

Maçonnerie

Dans v4nous avons utilisé une technique CSS uniquement pour imiter le comportement des colonnes de type maçonnerie , mais cette technique entraînait de nombreux effets secondaires désagréables . Si vous souhaitez avoir ce type de mise en page dans v5, vous pouvez simplement utiliser le plugin Masonry. La maçonnerie n'est pas incluse dans Bootstrap , mais nous avons réalisé un exemple de démonstration pour vous aider à démarrer.